<template>
  <div class="demo-container">
    <h2>单元格合并功能</h2>
    <p>展示行合并和列合并功能</p>

    <div class="controls">
      <el-radio-group v-model="mergeType">
        <el-radio :label="'row'">行合并</el-radio>
        <el-radio :label="'column'">列合并</el-radio>
        <el-radio :label="'both'">行列合并</el-radio>
        <el-radio :label="'none'">不合并</el-radio>
      </el-radio-group>
    </div>

    <AdvancedTable
      :data="tableData"
      :columns="columns"
      :span-method="spanMethod"
      :selection="false"
      :show-index="true"
      height="500px"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { AdvancedTable } from '../components/Table'
import {
  finalRowMerge,
  finalColMerge,
  finalBothMerge,
} from '../components/Table/utils'

// 合并类型
const mergeType = ref('row')

// 表格列定义
const columns = [
  {
    prop: 'department',
    label: '部门',
    width: 120,
  },
  {
    prop: 'group',
    label: '小组',
    width: 120,
  },
  {
    prop: 'name',
    label: '姓名',
    width: 120,
  },
  {
    prop: 'position',
    label: '职位',
    width: 120,
  },
  {
    prop: 'salary',
    label: '薪资',
    width: 120,
  },
]

// 表格数据 - 有意设计成多行数据具有相同值，以便测试合并
const tableData = ref([
  {
    id: 1,
    department: '研发部',
    group: '前端组',
    name: '张三',
    position: '高级工程师',
    salary: 18000,
  },
  {
    id: 2,
    department: '研发部',
    group: '前端组',
    name: '李四',
    position: '中级工程师',
    salary: 12000,
  },
  {
    id: 3,
    department: '研发部',
    group: '前端组',
    name: '王五',
    position: '初级工程师',
    salary: 9000,
  },
  {
    id: 4,
    department: '研发部',
    group: '后端组',
    name: '赵六',
    position: '高级工程师',
    salary: 18000,
  },
  {
    id: 5,
    department: '研发部',
    group: '后端组',
    name: '钱七',
    position: '架构师',
    salary: 25000,
  },
  {
    id: 6,
    department: '设计部',
    group: 'UI组',
    name: '孙八',
    position: '设计师',
    salary: 14000,
  },
  {
    id: 7,
    department: '设计部',
    group: 'UI组',
    name: '周九',
    position: '设计师',
    salary: 14000,
  },
  {
    id: 8,
    department: '设计部',
    group: 'UX组',
    name: '吴十',
    position: '用户体验师',
    salary: 16000,
  },
  {
    id: 9,
    department: '市场部',
    group: '销售组',
    name: '郑十一',
    position: '销售经理',
    salary: 22000,
  },
  {
    id: 10,
    department: '市场部',
    group: '销售组',
    name: '王十二',
    position: '销售代表',
    salary: 8000,
  },
])

// 合并单元格方法
const spanMethod = computed(() => {
  const dataForMerge = tableData.value // 使用完整数据进行合并计算

  switch (mergeType.value) {
    case 'row':
      return ({ row, column, rowIndex, columnIndex }: any) => {
        return finalRowMerge('department')({
          data: dataForMerge,
          row,
          rowIndex,
          columnIndex,
        })
      }
    case 'column':
      return ({ row, column, rowIndex, columnIndex }: any) => {
        return finalColMerge(['department', 'group', 'position'])({
          row,
          columnIndex,
        })
      }
    case 'both':
      return ({ row, column, rowIndex, columnIndex }: any) => {
        return finalBothMerge('department', [
          'department',
          'group',
          'position',
        ])({
          data: dataForMerge,
          row,
          rowIndex,
          columnIndex,
        })
      }
    default:
      return undefined
  }
})
</script>

<style scoped>
.demo-container {
  padding: 20px;
}

h2 {
  margin-top: 0;
}

.controls {
  margin: 15px 0;
  display: flex;
  gap: 20px;
}
</style>
